<template>
    <el-select clearable remote
               :remote-method="remoteMethod"
               @visible-change="visibleHandler"
               @change="selectHandle"
               v-model="username" filterable @clear="setDefaultValue"
               placeholder="请选择"
               style="width:260px;">
      <div v-infinite-scroll="getLoad"
           :infinite-scroll-disabled="busy"
      >
        <el-option
          v-for="item in users"
          :key="item.username"
          :label="`${item.username}/${item.username}`"
          :value="item.username"
        ></el-option>
      </div>
    </el-select>
</template>
<script>

  import infiniteScroll from '@/components/Select/directive';

  export default {
    directives: {infiniteScroll},
    name: "username",
    props: {
      value: String
    },
    data() {
      return {
        users: [],
        username: '',
        pageSize: 10,
        currentPage: 1,
        haveData: true,
        busy: false,
        data: {
          username: ''
        }
      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      remoteMethod(val) {
        this.currentPage = 1;
        this.username = val.trim();
        this.haveData = true;
        this.getList(val);
      },
      visibleHandler(e) {
        // if (!e) {
        //   this.remoteMethod(this.username);
        // }
      }
      ,
      selectHandle(username) {
        console.log("ddd",username)
        this.$emit('input', this.username)
      },
      setDefaultValue() {
        this.username = '';
        this.users = [];

      },
      getLoad () {
        this.getList();
      },
      getList(username) {
        if (!this.haveData) return;
        this.busy = true;
        this.data.username = username;
        this.$http({
          url: this.$http.adornUrl('/sys/user/listByDto'),
          method: 'post',
          data: this.$http.adornData({
            'data': this.data,
            'pageNum': this.currentPage,
            'pageSize': this.pageSize
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.users = (this.currentPage === 1 ? [] : this.users).concat(data.page.list);
            this.currentPage += 1;
            if (data.page.list.length < 10) {
              this.haveData = false;
            }
            this.busy = false;
            // this.dataForm.groupName = this.groups[0].name
            // this.initDataList();
          } else {
          }
        })
      },

    }
  };
</script>
<style>
</style>


